import React, { Component } from 'react';
import { SearchBar, Tabs, List } from 'antd-mobile'
import "../styles/Search_xiang.scss"
import * as service from "../api/index"


class Search_xiang extends Component {
    state = {
        pic: [],
        youji: [],
        jiudian: [],
        wenda: [],
        yonghu: [],
        yonghu: []
    }
    async componentDidMount() {
        //全部
        var res = await service.search_qiang()
        // console.log(res.data.list);
        this.setState({ pic: res.data.list })
        //酒店
        var res1 = await service.search_qiang_jiudian()
        // console.log(res1.data.list);
        this.setState({ jiudian: res1.data.list })

        // 游记
        var res3 = await service.index_youji()
        // console.log(res3.data[0]);
        this.setState({ youji: res3.data[0] })

        //攻略问答
        var res4 = await service.gong_wenda()
        // console.log(res4);
        this.setState({ wenda: res4.data.list },)

        //用户
        var res5 = await service.search_yonghu()
        console.log(res5.data.list);
        this.setState({ yonghu: res5.data.list },)
    }

    render() {
        return (
            <div className='search_xiangqiang'>
                <div className='sousuo'>
                    <SearchBar placeholder='请输入内容' showCancelButton={() => true} />
                </div>
                <div className="xxia">
                    <Tabs>
                        <Tabs.Tab title='全部' key='fruits'>

                            <List.Item onClick={() => { }}>
                                <h2>韩国</h2>
                            </List.Item>

                            <div className="tu">
                                {
                                    this.state.pic.map((item, index) => {
                                        return (
                                            <div className="one" key={index}>
                                                <img src={item.img} alt="" />
                                                <h3>{item.title}</h3>
                                            </div>
                                        )
                                    })
                                }

                            </div>
                            <div className="remen">
                                <h2>热门话题</h2>
                                <div className="ssp">
                                    <span>#三天两晚自由行</span>
                                    <span>#韩国自由行</span>
                                    <span>#韩国行</span>
                                    <span>#毕业旅行必打卡胜地</span>
                                </div>
                            </div>
                            <div className="youji">
                                <h4>精选游记</h4>
                                {
                                    this.state.youji.pic?.map((item, index) => {
                                        return (
                                            <div className="youji_one" key={index}>
                                                <img src={item.img} alt="" />
                                                <p>{this.state.youji.jieshao}</p>
                                                <div className="mao">
                                                    <p>{this.state.youji.name}</p>
                                                    <p>{this.state.youji.dianzan}</p>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='酒店' key='vegetables'>
                            <div className="jiudian">
                                {
                                    this.state.jiudian.map((item, index) => {
                                        return (
                                            <div className="xia_box" key={index}>
                                                <div className="zuo">
                                                    <img src={item.pic} alt="" />
                                                </div>
                                                <div className="you">
                                                    <p>{item.name}</p>
                                                    <h4>{item.title}</h4>
                                                    <p>{item.xingji}</p>
                                                    <h5><span>{item.money}</span>{item.old_money}</h5>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='游记' key='animals'>
                            <div className="youji">
                                {
                                    this.state.youji.pic?.map((item, index) => {
                                        return (
                                            <div className="youji_one" key={index}>
                                                <img src={item.img} alt="" />
                                                <p>{this.state.youji.jieshao}</p>
                                                <div className="mao">
                                                    <p>{this.state.youji.name}</p>
                                                    <p>{this.state.youji.dianzan}</p>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='问答' key='animalo'>
                            <div className="wenda">
                                {
                                    this.state.wenda.map((item, index) => {
                                        return (
                                            <div className="wenda_one" key={index}>
                                                <h3>{item.name}</h3>
                                                <div className="hhh">
                                                    <h4>{item.shuoming}</h4>
                                                    <span>{item.xingcheng}</span>
                                                    <div className="xia">
                                                        <p>{item.time}</p>
                                                        <p>{item.msg}</p>
                                                    </div>
                                                </div>

                                            </div>
                                        )
                                    })
                                }

                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='用户' key='anima'>
                            <div className="yonghu">
                                {
                                    this.state.yonghu.map((item, index) => {
                                        return (
                                            <div className="one_yonghu" key={index}>
                                                <div className="tu" onClick={() => { this.props.history.push('/yonghu_xiang') }} >
                                                    <img src={item.pic} alt="" />
                                                </div>
                                                <div className="name">
                                                    <h4>{item.name}</h4>
                                                    <p>{item.jieshao}</p>
                                                </div>
                                                <div className="bts">
                                                    <span>+关注</span>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default Search_xiang;